/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-12 10:50:09
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-12 11:53:24
 */
import React, { useState } from 'react'
import { add } from '../store/actions/todos'
import { useDispatch } from 'react-redux'
export default function Header() {
  const dispatch = useDispatch()
  const [val, setval] = useState('')
  const upHandle = (e) => {
    console.log(e.keyCode, 9)
    //  将数据存储到store中
    if (e.keyCode === 13) {
      // 表示按得的enter键

      dispatch({ type: 'todos/add', payload: val })
      setval('')
    }
  }
  return (
    <header className="header">
      <h1>todos</h1>=={val}
      <input
        value={val}
        onKeyUp={upHandle}
        onChange={(e) => setval(e.target.value)}
        className="new-todo"
        placeholder="接下来打算做点啥?"
        autoFocus
      />
    </header>
  )
}
